<template>
  <!-- 这里是写的是点击查看的页面 -->
  <div class="detail">
    {{ userInfo }}
    <el-card>
      <el-tabs class="el_card">
        <el-tab-pane label="登录账户设置">
          <div class="center_z">
            <!-- form表单开始 -->
            <el-form ref="form" label-width="80px" :model="form" :rules="rules">
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="form.username" class="changdu" />
              </el-form-item>
              <el-form-item label="新密码:" prop="password">
                <el-input v-model="form.password" class="changdu" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">更新</el-button>
              </el-form-item>
            </el-form></div>
        </el-tab-pane>
        <el-tab-pane label="个人详情">
          <info :user-info="userInfo" @getData="getData" />
        </el-tab-pane>
        <el-tab-pane label="岗位信息">
          <Job />
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
/* 导入之前封装的用户信息的请求 */
import { sysUser } from '@/api/user'
import { sysUserPut } from '@/api/employees'
export default {
  components: {
    info: () => import('./components/Info.vue'), /* 路由懒加载为了避免页面一打开就显示 我们等到他触发的时候再显示 */
    Job: () => import('./components/Job .vue')
  },
  data() {
    return {
      userInfo: {}, /* 如果两个页面公用一个数据 就会导致个人详细里的数据改变且不用提交后  */
      userInfo2: {},
      form: {
        username: '', /* 账号 */
        password: ''/* 新密码 */
      },
      /* 表单验证 */
      rules: {
        username: [{ require: true, message: '必填', trigger: 'change' }],
        password: [{ require: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '最小6位最大12位', trigger: 'change' }]
      },
      /* 定义一个变量存 传过来的动态路由参数 */
      userId: this.$route.params.id
    }
  },
  /* 页面一打开就发请求  但是发现问题就是 需要用到ID那就跳转传参*/
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysUser(this.userId)
      this.form.username = res.data.username
      /* 这里虽然定义了两个不同的变量但他们用的还是同一个数据  深拷贝就可以解决 */
      this.userInfo = JSON.parse(JSON.stringify(res.data))
      this.userInfo2 = res.data
      console.log('员工详情', res)
    },
    /* 按下更新按钮 更新用户数据  */
    async submit() {
      /* 第一步 通过表单验证 */
      await this.$refs.form.validate() // 这里因为加了await所以如果表单验证不通过 下面的代码·就不会执行
      /* 去封装保存员工基本信息的接口 */
      await sysUserPut({ ...this.userInfo2, ...this.form })
      this.$message.success('更新成功')
      /* 更新成功后 如果 当前修改的数据是登录的数据 就更新上面的姓名 */
      if (this.userId === this.$store.state.user.userInfo.id) {
        /* 因为 接口写在了vuex中 所以直接调用里面的请求 */
        this.$store.dispatch('user/getUserInfo')
      }
      /* 子的数据变化后 记得要更新数据 */
      this.getData()
    }
  }

}
</script>

<style scoped lang="scss">
.center_z{
    display: flex;
    justify-content: center;
}

.detail{
    padding: 20px;
}
.changdu{
    width: 300px;
}

</style>
